import React, { Component } from 'react';
import './Home.scss'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import axios from 'axios'



class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            Goods_Info: [],
            Goods_Info_List: [],
            Goods_Info_number: []
        }
    }
    Gequest_Goods_Info() {
        axios.get("http://api.aulence.com/store-manage/w2001/goods-manage-dzIwMDEtZ3JvdXAx/goods-info.php")
            .then((res) => {
                this.setState({
                    Goods_Info: res.data,
                });
                this.GetGoodsInfoData();
            })
            .catch((err) => {
                console.error(err);
            });
    }
    GetGoodsInfoData() {
        // console.log(this.state.Goods_Info);
        const list = Array.from(
            new Set(
                this.state.Goods_Info.map((list) => {
                    return list.category;
                })
            )
        );
        this.setState({
            Goods_Info_List: list,
        });

        const Get_count_price =
            this.state.Goods_Info_List.forEach(listname => {
                let count = 0
                this.state.Goods_Info.forEach(list => {

                    if (listname === list.category) {
                        count += Number(list.price)
                    }
                })
                this.state.Goods_Info_number.push(count)
                count = 0
            })

        console.log(this.state.Goods_Info_List)

        const myChart = echarts.init(document.getElementById("foot"));
        myChart.setOption({
            title: {
                text: "出入库商品数量",
            },
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: ["最低气温", "最高气温"],
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                },
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: [],
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    name: "最低气温",
                    type: "line",
                    stack: "总量",
                    data: [120, 132, 101, 134, 90, 230, 210],
                },
                {
                    name: "最高气温",
                    type: "line",
                    stack: "总量",
                    data: [220, 182, 191, 234, 290, 330, 310],
                },
            ],
        });

        var myChart1 = echarts.init(document.getElementById("main"));
        // 绘制图表
        myChart1.setOption({
            title: {
                text: "最新入库商品统计",
            },
            tooltip: {},
            xAxis: {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#000",
                    },
                    fontSize: 6,
                    interval: 0,
                    formatter: function (value) {
                        debugger;
                        var ret = ""; //拼接加\n返回的类目项
                        var maxLength = 5; //每项显示文字个数
                        var valLength = value.length; //X轴类目项的文字个数
                        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                        if (rowN > 1) {
                            //如果类目项的文字大于3,
                            for (var i = 0; i < rowN; i++) {
                                var temp = ""; //每次截取的字符串
                                var start = i * maxLength; //开始截取的位置
                                var end = start + maxLength; //结束截取的位置
                                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                temp = value.substring(start, end) + "\n";
                                ret += temp; //凭借最终的字符串
                            }
                            return ret;
                        } else {
                            return value;
                        }
                    },
                },
                length: 8,
                data: this.state.Goods_Info_List
                // data: this.state.Goods_Info_List,
            },

            yAxis: {

            },
            series: [
                {
                    name: "销量",
                    type: "bar",
                    data: this.state.Goods_Info_number,
                },
            ],
        });


        var myChart2 = echarts.init(document.getElementById("cont"));
        myChart2.setOption({
            title: {
                text: "商品种类占比",
            },
            // backgroundColor: '#2c343c',
            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: this.state.Goods_Info_number,
                    roseType: 'angle',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'black'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'black'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            normal: {
                                color: '#c23531',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                }
            ]
        });
    }
    componentDidMount() {
        this.Gequest_Goods_Info()
    }
    render() {
        return (
            <div className="Home">
                <header>
                    <div>管理首页</div>
                </header>
                <main>
                    <div className="echarts-top">
                        <div id="main"></div>
                        <div id="cont"></div>
                    </div>
                    <div className="echarts-bottom" id="foot"></div>
                </main>
            </div>
        );
    }
}
export default Home;